/**
 * Created by dazq on 16/11/23.
 */
import React, { Component } from 'react';
import { Text,Button, View,TouchableHighlight,StyleSheet,Alert } from 'react-native';
import { Actions } from 'react-native-router-flux';
import GiftedListView from 'react-native-gifted-listview'

export default class TestGiftedListView extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
          _renderRowView = this._renderRowView.bind(this)
          _onPress = this._onPress.bind(this)
      }
    /**
     * Will be called when refreshing
     * Should be replaced by your own logic
     * @param {number} page Requested page to fetch
     * @param {function} callback Should pass the rows
     * @param {object} options Inform if first load
     */
    _onFetch(page = 1, callback, options) {
        setTimeout(() => {
            var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];
            if (page === 6) {
                callback(rows, {
                    allLoaded: true, // the end of the list is reached
                });
            } else {
                callback(rows);
            }
        }, 1000); // simulating network fetching
    }


    /**
     * When a row is touched
     * @param {object} rowData Row data
     */
    _onPress(rowData,rowID) {
        Actions.listView({title:rowID});
    }
    /**
     * Render a row
     * @param {object} rowData Row data
     */
    _renderRowView(rowData) {
        return (
            <TouchableHighlight
                style={styles.row}
                underlayColor='#c8c7cc'
                onPress={() => this._onPress(rowData)}
            >
                <Text>{rowData}</Text>
            </TouchableHighlight>
        );
    }
    _renderHeaderView(){
        return(
            <View style={styles.header}>
                <Text>This header View</Text>
            </View>
        )
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.navBar} />
                <GiftedListView
                    headerView={this._renderHeaderView}
                    rowView={this._renderRowView}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
          }}

                    refreshableTintColor="black"
                />
            </View>
        );
    }

}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    navBar: {
        height: 64,
        backgroundColor: '#CCC'
    },
    row: {
        padding: 10,
        height: 44,
    },
    header:{
        height:40,
        justifyContent:'center',
        backgroundColor:'#F5F5F5'
    }
});